    // 先设定参数

    // 默认 显示 第一页 内容
    let page = 1;
    // 默认 每页 显示 8 条数据
    let line = 8;
    // 获取浏览器地址栏数据对象
    let obj = myGetUrlValObj();
    // console.log( obj );



        // 使用 async 和 await 实现
        setPage();
        async function setPage(){
    
          // 向 后端程序发送 ajax请求
          const res =await myPromiseJQueryAjax( '../server/goods_list.php' , 'get' , {
            cat_one_id: obj.cat_one_id,
            page:page,
            // 对象的简写语法,键名和键值的变量 名称相同 写一个就行了
            line,
          } , 'json' );
          console.log(res);
    
          // 根据 响应体结果 动态渲染生成 页面
          let str = '';
          res.data.forEach(function(item){
            str += `
            <li class="list-item">
              <div class="panel panel-primary">
                <div class="panel-body">
                  <ol class="breadcrumb">
                    <li><a href="#">${item.cat_one_id}</a></li>
                    <li><a href="#">${item.cat_two_id}</a></li>
                    <li class="active">${item.cat_three_id}</li>
                  </ol>
                </div>
                <div class="panel-footer">
                  <div class="row">
                    <div class="">
                      <div class="thumbnail">
                        <img src="${item.goods_big_logo}" alt="...">
                        <div class="caption">
                          <h3>${item.goods_name}</h3>
                          <p>
                            <i class="glyphicon glyphicon-yen"></i>
                            <span>${item.goods_price}</span>
                          </p>
                          <p>
                            <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                            <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            `;
          })
    
          $('.container ul').html(str);
    
          // 将 分页插件程序 直接定义在 响应体程序中
          // 分页插件功能
          $('.box').pagination({
            pageCount: res.sumPage,       // 总页数
            totalData: res.row,           // 数据总数量
            current: res.page,            // 当前第几页
            showData: res.line,           // 每页数据数量
            prevCls:'prev',               // 上一页类名
            nextCls:'next',               // 下一页类名
            prevContent: '上一页',         // 上一页内容
            nextContent: '下一页',         // 下一页内容
            activeCls: 'active',           // 选中页 class类名
            mode: 'fixed',                 // 显示分页按钮 为 固定模式状态
            count: 4,                      // 分页按钮 显示的数量 不算 选中页 也就是 设定4 一共显示 5个按钮
            coping: true,                  // 显示 首页 末页
            homePage: '首页',              // 设定首页内容
            endPage: '末页',               // 设定末页内容
            isHide: true,                  // 总页数 为 0 或者 1 隐藏 分页控件
            keepShowPN: true,              // 显示 上一页 下一页 
            jump: true,                    // 开启 跳转
            callback:function(result){     // 执行的回调函数 必须要有一个参数
              // 参数.getCurrent() 获取分页插件 点击之后 对应的页数
              console.log( result.getCurrent()  );
    
              // 将结果 赋值给 page 变量 存储
              page = result.getCurrent();
    
              // 根据新的 page 数据 再次发送请求 动态渲染生成新的页面
              setPage()
            }
          });
    
        }
    


